<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拟物时钟</title>
  <link rel="stylesheet" href="index.css">
  <style>
    /*底座*/
    .bg {
      width: 400px;
      height: 400px;
      margin: 50px auto;
      background: linear-gradient(to bottom, skyblue 0%, #29b2ea 100%);
      border-radius: 20%;
      box-shadow: 2px 2px 25px rgba(255, 255, 255, .5) inset, 20px 20px 40px #7fdaff inset, -10px -10px 30px rgba(0, 0, 50, .3) inset, -20px -20px 40px #16a5df inset, 10px 25px 40px -10px rgba(0, 0, 0, .5);
    }
  </style>
</head>
<body>
  <div class="bg">
    <div class="clock">
      <div class="hour" id="h"></div>
      <div class="min" id="m"></div>
      <div class="sen" id="s">
        <span class="black"></span>
        <span class="red"></span>
      </div>
    </div>
  </div>
</body>
<script>
  var s = document.getElementById('s');
  var m = document.getElementById('m');
  var h = document.getElementById('h');
  function getTime() {
    var date = new Date();
    var millisecond = date.getMilliseconds();
    var second = date.getSeconds() + millisecond / 1000;
    s.style.transform = 'rotate(' + second * 6 + 'deg)';
    var minute = date.getMinutes() + second / 60;
    m.style.transform = 'rotate(' + minute * 6 + 'deg)';
    var hour = date.getHours() + minute / 60;
    h.style.transform = 'rotate(' + hour * 30 + 'deg)';
  }
  getTime();
  // setInterval(getTime, 1);
  setInterval('getTime()', 1);
</script>
</html>